// AR体验页面交互功能

document.addEventListener('DOMContentLoaded', function() {
    // 初始化AR功能
    initializeAR();
    
    // 设置模式切换
    setupModeSwitch();
    
    // 设置扫描功能
    setupScanning();
    
    // 设置拍照功能
    setupCapture();
    
    // 设置语音助手
    setupAssistant();
    
    // 设置底部导航
    setupBottomNavigation();
});

// 初始化AR
function initializeAR() {
    // 模拟AR初始化
    setTimeout(() => {
        console.log('AR功能初始化完成');
        
        // 显示语音助手欢迎消息
        setTimeout(() => {
            showAssistantMessage('欢迎来到江心屿AR体验！请对准景点开始识别。');
        }, 1000);
    }, 500);
    
    // 模拟相机权限请求
    requestCameraPermission();
}

// 请求相机权限
function requestCameraPermission() {
    // 这里可以添加实际的相机权限请求逻辑
    console.log('请求相机权限...');
}

// 模式切换
function setupModeSwitch() {
    const modeBtns = document.querySelectorAll('.mode-btn');
    
    modeBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            // 移除所有活动状态
            modeBtns.forEach(b => b.classList.remove('active'));
            
            // 设置当前模式为活动状态
            this.classList.add('active');
            
            // 切换AR模式
            const mode = this.dataset.mode;
            switchARMode(mode);
            
            // 添加点击动画
            this.style.transform = 'scale(0.95)';
            setTimeout(() => {
                this.style.transform = 'scale(1)';
            }, 150);
        });
    });
}

// 切换AR模式
function switchARMode(mode) {
    const scanArea = document.querySelector('.ar-scan-area');
    const arResult = document.querySelector('.ar-result');
    const arInteractions = document.querySelector('.ar-interactions');
    const arGuideMode = document.querySelector('.ar-guide-mode');
    
    // 隐藏所有模式
    scanArea.classList.remove('hidden');
    arResult.classList.add('hidden');
    arInteractions.classList.add('hidden');
    arGuideMode.classList.add('hidden');
    
    switch(mode) {
        case 'scan':
            scanArea.classList.remove('hidden');
            showAssistantMessage('扫描模式已开启，请对准景点或文物。');
            break;
        case 'ar':
            arResult.classList.remove('hidden');
            arInteractions.classList.remove('hidden');
            showAssistantMessage('AR互动模式已开启，点击互动热点体验。');
            break;
        case 'guide':
            arGuideMode.classList.remove('hidden');
            showAssistantMessage('导览模式已开启，跟随箭头指引前往下一个景点。');
            startGuidedTour();
            break;
    }
}

// 设置扫描功能
function setupScanning() {
    const scanArea = document.querySelector('.ar-scan-area');
    
    // 模拟扫描过程
    let scanInterval;
    
    scanArea.addEventListener('click', function() {
        startScanning();
    });
    
    // 自动开始扫描
    setTimeout(startScanning, 2000);
}

// 开始扫描
function startScanning() {
    const scanLine = document.querySelector('.scan-line');
    const scanText = document.querySelector('.scan-text p');
    
    scanLine.style.animation = 'scan 1s infinite';
    scanText.textContent = '正在扫描中...';
    
    // 模拟扫描结果
    setTimeout(() => {
        const success = Math.random() > 0.3; // 70%成功率
        if (success) {
            showScanResult();
        } else {
            scanText.textContent = '未识别到目标，请调整角度重试';
            setTimeout(() => {
                scanText.textContent = '对准江心屿景点或文物';
            }, 2000);
        }
    }, 3000);
}

// 显示扫描结果
function showScanResult() {
    const scanArea = document.querySelector('.ar-scan-area');
    const arResult = document.querySelector('.ar-result');
    const arInteractions = document.querySelector('.ar-interactions');
    
    scanArea.classList.add('hidden');
    arResult.classList.remove('hidden');
    arInteractions.classList.remove('hidden');
    
    // 切换到AR模式
    document.querySelector('[data-mode="ar"]').click();
    
    showAssistantMessage('识别成功！发现东塔，点击互动热点了解更多。');
    
    // 添加识别成功动画
    createSuccessAnimation();
}

// 创建成功动画
function createSuccessAnimation() {
    const successElement = document.createElement('div');
    successElement.innerHTML = '✓';
    successElement.style.position = 'absolute';
    successElement.style.top = '50%';
    successElement.style.left = '50%';
    successElement.style.transform = 'translate(-50%, -50%)';
    successElement.style.fontSize = '60px';
    successElement.style.color = '#4CAF50';
    successElement.style.fontWeight = 'bold';
    successElement.style.zIndex = '1000';
    successElement.style.animation = 'successPulse 1s ease-out forwards';
    
    document.body.appendChild(successElement);
    
    setTimeout(() => {
        successElement.remove();
    }, 1000);
}

// 设置拍照功能
function setupCapture() {
    const captureBtn = document.getElementById('captureBtn');
    const galleryBtn = document.getElementById('galleryBtn');
    const switchCameraBtn = document.getElementById('switchCameraBtn');
    const flashBtn = document.getElementById('flashBtn');
    
    // 拍照按钮
    captureBtn.addEventListener('click', function() {
        takePhoto();
    });
    
    // 相册按钮
    galleryBtn.addEventListener('click', function() {
        openGallery();
    });
    
    // 切换相机按钮
    switchCameraBtn.addEventListener('click', function() {
        switchCamera();
    });
    
    // 闪光灯按钮
    flashBtn.addEventListener('click', function() {
        toggleFlash();
    });
}

// 拍照
function takePhoto() {
    const captureBtn = document.getElementById('captureBtn');
    const captureInner = captureBtn.querySelector('.capture-inner');
    
    // 拍照动画
    captureInner.style.transform = 'scale(0.8)';
    captureInner.style.background = '#ffeb3b';
    
    setTimeout(() => {
        captureInner.style.transform = 'scale(1)';
        captureInner.style.background = 'white';
    }, 200);
    
    // 模拟拍照
    console.log('拍照中...');
    showToast('照片已保存到相册');
    
    // 创建快门效果
    createShutterEffect();
}

// 创建快门效果
function createShutterEffect() {
    const shutter = document.createElement('div');
    shutter.style.position = 'fixed';
    shutter.style.top = '0';
    shutter.style.left = '0';
    shutter.style.width = '100%';
    shutter.style.height = '100%';
    shutter.style.background = 'white';
    shutter.style.zIndex = '999';
    shutter.style.animation = 'shutter 0.3s ease-out forwards';
    
    document.body.appendChild(shutter);
    
    setTimeout(() => {
        shutter.remove();
    }, 300);
}

// 打开相册
function openGallery() {
    console.log('打开相册');
    showToast('相册功能开发中...');
}

// 切换相机
function switchCamera() {
    console.log('切换相机');
    showToast('切换摄像头');
}

// 切换闪光灯
function toggleFlash() {
    const flashBtn = document.getElementById('flashBtn');
    const isActive = flashBtn.classList.contains('active');
    
    if (isActive) {
        flashBtn.classList.remove('active');
        flashBtn.querySelector('i').style.color = 'white';
        showToast('闪光灯已关闭');
    } else {
        flashBtn.classList.add('active');
        flashBtn.querySelector('i').style.color = '#ffeb3b';
        showToast('闪光灯已开启');
    }
}

// 设置语音助手
function setupAssistant() {
    const assistant = document.querySelector('.ar-assistant');
    const assistantAvatar = assistant.querySelector('.assistant-avatar');
    
    assistantAvatar.addEventListener('click', function() {
        toggleAssistant();
    });
    
    // 自动显示欢迎消息
    setTimeout(() => {
        showAssistantMessage('我是您的AR导游小江，有什么可以帮助您的吗？');
    }, 3000);
}

// 切换语音助手
function toggleAssistant() {
    const bubble = document.querySelector('.assistant-bubble');
    const isVisible = !bubble.classList.contains('hidden');
    
    if (isVisible) {
        bubble.classList.add('hidden');
    } else {
        bubble.classList.remove('hidden');
        // 5秒后自动隐藏
        setTimeout(() => {
            bubble.classList.add('hidden');
        }, 5000);
    }
}

// 显示助手消息
function showAssistantMessage(message) {
    const bubble = document.querySelector('.assistant-bubble');
    const bubbleContent = bubble.querySelector('.bubble-content p');
    
    bubbleContent.textContent = message;
    bubble.classList.remove('hidden');
    
    // 5秒后自动隐藏
    setTimeout(() => {
        bubble.classList.add('hidden');
    }, 5000);
}

// 开始导览
function startGuidedTour() {
    console.log('开始导览模式');
    
    // 模拟导览进度
    let progress = 30;
    const progressFill = document.querySelector('.progress-fill');
    const progressText = document.querySelector('.progress-text span');
    
    const tourInterval = setInterval(() => {
        progress += Math.random() * 5;
        if (progress >= 100) {
            progress = 100;
            clearInterval(tourInterval);
            showAssistantMessage('恭喜您完成导览！感谢您的参与。');
        }
        
        progressFill.style.width = progress + '%';
        progressText.textContent = `游览进度: ${Math.floor(progress)}%`;
    }, 2000);
}

// 设置互动热点
function setupInteractionHotspots() {
    const hotspots = document.querySelectorAll('.interaction-hotspot');
    
    hotspots.forEach(hotspot => {
        hotspot.addEventListener('click', function() {
            const icon = this.querySelector('.hotspot-icon i');
            const iconClass = icon.className;
            
            if (iconClass.includes('fa-info')) {
                showInfoInteraction();
            } else if (iconClass.includes('fa-music')) {
                showMusicInteraction();
            }
        });
    });
}

// 信息互动
function showInfoInteraction() {
    showAssistantMessage('这是东塔的详细信息：建于唐代，高32米，是江心屿的标志性建筑。');
    showToast('点击查看详细信息');
}

// 音乐互动
function showMusicInteraction() {
    showAssistantMessage('正在播放江心屿的历史故事...');
    showToast('开始语音讲解');
}

// 显示提示
function showToast(message) {
    const toast = document.createElement('div');
    toast.textContent = message;
    toast.style.position = 'fixed';
    toast.style.top = '100px';
    toast.style.left = '50%';
    toast.style.transform = 'translateX(-50%)';
    toast.style.background = 'rgba(0,0,0,0.8)';
    toast.style.color = 'white';
    toast.style.padding = '12px 24px';
    toast.style.borderRadius = '24px';
    toast.style.fontSize = '14px';
    toast.style.zIndex = '1000';
    toast.style.animation = 'fadeInOut 2s ease-out forwards';
    
    document.body.appendChild(toast);
    
    setTimeout(() => {
        toast.remove();
    }, 2000);
}

// 底部导航
function setupBottomNavigation() {
    const navItems = document.querySelectorAll('.fixed.bottom-0 .text-center');
    
    navItems.forEach((item, index) => {
        item.addEventListener('click', function() {
            // 移除所有活动状态
            navItems.forEach(nav => {
                const icon = nav.querySelector('i');
                const text = nav.querySelector('p');
                icon.classList.remove('text-green-600');
                icon.classList.add('text-gray-400');
                text.classList.remove('text-green-600');
                text.classList.add('text-gray-400');
            });
            
            // 设置当前项为活动状态
            const currentIcon = this.querySelector('i');
            const currentText = this.querySelector('p');
            currentIcon.classList.remove('text-gray-400');
            currentIcon.classList.add('text-green-600');
            currentText.classList.remove('text-gray-400');
            currentText.classList.add('text-green-600');
        });
    });
    
    // 设置互动热点
    setupInteractionHotspots();
}

// 添加动画样式
const style = document.createElement('style');
style.textContent = `
    @keyframes successPulse {
        0% {
            transform: translate(-50%, -50%) scale(0);
            opacity: 1;
        }
        50% {
            transform: translate(-50%, -50%) scale(1.2);
            opacity: 1;
        }
        100% {
            transform: translate(-50%, -50%) scale(1.4);
            opacity: 0;
        }
    }
    
    @keyframes shutter {
        0% { opacity: 0; }
        50% { opacity: 1; }
        100% { opacity: 0; }
    }
    
    @keyframes fadeInOut {
        0% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
        20% { opacity: 1; transform: translateX(-50%) translateY(0); }
        80% { opacity: 1; transform: translateX(-50%) translateY(0); }
        100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    }
`;
document.head.appendChild(style);